<template>
    <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow" 
         width="100%"
         wrapClassName="full-modal"
         :title="isDisabled?'查看':(addEditParameter.id?'编辑':'新增')" 
         :okText="isDisabled?'关闭':(addEditParameter.id?'保存并关闭':'保存')"
         :cancelText="isDisabled?' ':'取消'"
         @ok="handleOk" 
         :cancelButtonProps="{props:{type:isDisabled?'link':''}}"
         :class="isDisabled?'modal-cancel-btn-n':''"
         :confirmLoading="confirmLoading"
         @cancel="visibleShow = false">
            <a-spin size="large" :spinning="spinning">
                
                <div :key="visibleKey">
                    <a-form
                    :form="form" 
                    layout="horizontal" 
                    class="enterpriseInformation-modal-from" 
                    v-if="(visibleShow && !addEditParameter.id) || addEditParameter.isEnterpriseInformationIndex" 
                    @submit="handleSubmit">
                        <a-form-item label="企业名称">
                            <a-input
                            v-model:value="formState.fqymc"
                            placeholder="请输入企业名称"
                            v-decorator="[
                                'fqymc', { initialValue:formState.fqymc, rules: rules.fqymc}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="所在地区">
                            <a-input v-model:value="formState.fszdq" placeholder="请输入所在地区"/>
                            <!-- <a-select
                                v-model:value="formState.fszdq"
                                placeholder="请选择所在地区"
                            >
                                <a-select-option :value="item.value" v-for="(item,index) in optionsArr">
                                    {{item.label}}
                                </a-select-option>
                            </a-select> -->
                        </a-form-item>
                        <a-form-item label="分类码">
                            <a-input v-model:value="formState.fflm" placeholder="请输入分类码"/>
                        </a-form-item>
                        <a-form-item label="统一社会信用代码">
                            <a-input
                            v-model:value="formState.ftyshxydm"
                            placeholder="请输入统一社会信用代码"
                            v-decorator="[
                                'ftyshxydm', { initialValue:formState.ftyshxydm, rules: rules.ftyshxydm}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="企业许可证号">
                            <a-input v-model:value="formState.fqyxkzh" placeholder="请输入企业许可证号"/>
                        </a-form-item>
                        <a-form-item label="企业许可证有效期">
                            <a-date-picker v-model:value="formState.fqyxkzyxq" placeholder="请输入企业许可证有效期"/>
                        </a-form-item>
                        <a-form-item label="发证日期">
                            <a-date-picker v-model:value="formState.ffzrq" placeholder="请输入发证日期"/>
                        </a-form-item>
                        <a-form-item label="企业法定代表人/负责人">
                            <a-input v-model:value="formState.fqyfddbrfzr" placeholder="请输入企业法定代表人/负责人"/>
                        </a-form-item>
                        <a-form-item label="企业联系人">
                            <a-input v-model:value="formState.fqylxr" placeholder="请输入企业联系人"/>
                        </a-form-item>
                        <a-form-item label="企业联系人电话">
                            <a-input v-model:value="formState.fqylxrdh" placeholder="请输入企业联系人电话"/>
                        </a-form-item>
                        <a-form-item label="企业联系人邮箱">
                            <a-input v-model:value="formState.fqylxryx" placeholder="请输入企业联系人邮箱"/>
                        </a-form-item>
                        <a-form-item label="传真">
                            <a-input v-model:value="formState.fcz" placeholder="请输入传真"/>
                        </a-form-item>
                        <a-form-item label="注册资本">
                            <a-input v-model:value="formState.fzczb" placeholder="请输入注册资本"/>
                        </a-form-item>
                        <a-form-item label="行政机构">
                            <a-input v-model:value="formState.fxzjg" placeholder="请输入行政机构"/>
                        </a-form-item>
                        <a-form-item label="企业类型">
                            <a-select
                                ref="select"
                                placeholder="请选择企业类型"
                                v-model:value="formState.fqylx"
                                v-decorator="[
                                    'fqylx', { initialValue:formState.fqylx, rules: rules.fqylx}
                                ]"
                                >
                                <a-select-option value="药品">药品</a-select-option>
                                <a-select-option value="化妆品">化妆品</a-select-option>
                                <a-select-option value="医疗器械">医疗器械</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="企业住所/注册地址" class="flex-1-box">
                            <a-input v-model:value="formState.fqyzszcdz" placeholder="请输入企业住所/注册地址"/>
                        </a-form-item>
                        <a-form-item label="生产地址" class="flex-1-box">
                            <a-input v-model:value="formState.fxxdz" placeholder="请输入生产地址"/>
                        </a-form-item>
                        <a-form-item label="生产范围" class="flex-1-box">
                            <a-textarea
                                placeholder="请输入生产范围"
                                v-model:value="formState.fscfw"
                                :autosize="{ minRows: 3, maxRows: 10000 }"
                            ></a-textarea>
                        </a-form-item>
                    </a-form>
                </div>
                <div>
                    <enterpriseInformationIndex :enterpriseId="addEditParameter.id" :isDisabled="isDisabled" v-if="visibleShow && addEditParameter.id && !addEditParameter.isEnterpriseInformationIndex" :key="enterpriseInformationKey" />
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import compSelector from '@/components/compSelector/compSelector'
import validator from '@/common/validator'
import enterpriseInformationIndex from '../../enterprise/information/index.vue'
import {addServe, editServe,ocalityPostAction} from './service/index'
import moment from 'moment'
export default {
    components:{
        compSelector,
        enterpriseInformationIndex
    },
    props:{
        addEditParameter:{
            type:Object,
            default:[]
        },
        isDisabled:{
            type:Boolean,
            default:false,
            required:false,
        },
    },
    data(){
        return{
            spinning:true,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            visibleShow:false,
            visibleKey:null,
            confirmLoading:false,
            typeSelect:typeSelect,
            formState:{},
            rules:{
                fqyfddbrfzr: [{
                    required: true,
                    message: '请输入企业法定代表人/负责人',
                    trigger: 'blur',
                }],
                fqylxr: [{
                    required: true,
                    message: '请输入企业联系人',
                    trigger: 'blur',
                }],
                fqylxrdh: [{
                    required: true,
                    message: '请输入企业联系人电话',
                    trigger: 'blur',
                }],
                fszdq: [{
                    required: true,
                    message: '请选择所在地区',
                    trigger: 'blur',
                }],
                fqylxryx:[{
                    required: true,
                    message: '请输入企业联系人邮箱',
                    trigger: 'blur',
                },{
                    pattern: validator.isEmail.reg,
                    message: '请输入正确的企业联系人邮箱',
                    trigger: 'blur',
                }],
                fqymc: [{
                    required: true,
                    message: '请输入企业名称',
                    trigger: 'blur',
                }],
                fqylx:[{
                    required: true,
                    message: '请选择企业类型',
                    trigger: 'blur',
                }],
                fqyxkzh: [{
                    required: true,
                    message: '请输入企业许可证号',
                    trigger: 'blur',
                }],
                fqyxkzyxq: [{
                    type:'object',
                    required: true,
                    message: '请输入企业许可证有效期',
                    trigger: 'blur',
                }],
                fqyzszcdz: [{
                    required: true,
                    message: '请输入企业住所/注册地址',
                    trigger: 'blur',
                }],
                ftyshxydm: [{
                    required: true,
                    message: '请输入统一社会信用代码',
                    trigger: 'blur',
                }],
                fxxdz: [{
                    required: true,
                    message: '请输入详细地址',
                    trigger: 'blur',
                }],
                fxzjg: [{
                    required: true,
                    message: '请输入行政机构',
                    trigger: 'blur',
                }],
            },
            formRequer:'',
            optionsArr:[],
            submittedSuccessfully:false,
            enterpriseInformationKey:null,
        }
    },
    watch:{
        addEditParameter(newval,oldVal){
            this.spinning = true
            //console.log('给了什么啊',newval)
            this.formState = newval
            this.enterpriseInformationKey = Date.now()
            this.cancelLoading()
        }
    },
    mounted(){
        ocalityPostAction({dictName:'观察员所属地市'}).then(res=>{
                //console.log('字典的res',res)
                if(res.code == 200){
                    if(res.result.length){
                        this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                    }
                    
                }
            })
    },
    updated(){
        // this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        optionsDataChange(dataList,dataType){
            var newOptionArr = []
            //标识每一项的下标，并且添加到每一项
            dataList.forEach((item,index) => {
                 
                //console.log(newOptionArr.filter(l=>l.itemIndex === index))
                if(!newOptionArr.filter(l=>l.itemIndex === index).length){
                    newOptionArr.push({...item,itemIndex:index})
                }
            });
            //console.log('这是有下标的数组',newOptionArr)
            for (let i = 0; i <= newOptionArr.length; i++) {//打印的item为数组中的每一个对象
                let item = newOptionArr[i]
                let index = i
                for (let key in item) { //遍历数组中的对象
                    var currentItem = {}
                    //console.log(index)
                     
                    if(index === item.itemIndex){
                        currentItem = {
                            label:item[dataType.label],
                            value:item[dataType.value]
                        }
                        
                        if(!this.optionsArr.filter(l=>l.label === currentItem.label).length && currentItem.label){
                            this.optionsArr.push(currentItem)
                        }
                    }
                    

                }
            }
            //console.log('当前获取到的optionArr',this.optionsArr)
        },
        handleSubmit(e) {
            //console.log(222222)
            var formState = {}
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    formState = {
                        ...this.formState,
                        ...values
                    }
                    this.formState.fqyxkzyxq = this.formState.fqyxkzyxq?moment(this.formState.fqyxkzyxq).format('YYYY-MM-HH'):''
                    if(formState.id){
                        editServe(formState).then(res=>{
                            if(res.code == 200){
                                this.submittedSuccessfully = true
                                this.$message.success('修改成功')
                                this.confirmLoading = false
                                this.visibleShow = false
                                this.$emit('handleOk',true,this.formState.id)
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        })
                    }else{
                        addServe(formState).then(res=>{
                            if(res.code == 200){
                                this.$message.success('添加成功')
                                
                                this.submittedSuccessfully = true
                                this.confirmLoading = false
                                // this.visibleShow = false
                                this.$emit('handleOk',true,'')
                                this.$emit('reviseClick',[res.result])
                                
                                this.visibleKey = Date.now()
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        })
                    }
                    
                }
            });
            
        },
        handleOk(){
            if(this.addEditParameter.id){
                this.visibleShow = false
            }else{
                this.handleSubmit()
            }
            
        }
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .enterpriseInformation-modal-from{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .ant-form-item{
        display: flex;
        // margin: 5px 0;
    }
    .ant-form-item-label{
        width: 175px;
    }
    .ant-form-item-control-wrapper{
        width: 260px;
    }
    .ant-calendar-picker{
        width: 260px;
    }
    .flex-1-box{
        display: flex;
        width: 100%;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    background: #fff;
  }
  .ant-modal-body {
    flex: 1;
    background: #fff;
    overflow-y: auto;
  }
}
</style>